<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>webkit-animation samples.</title>

<link rel="stylesheet" type="text/css" href="./common.css">
	<script type="text/javascript" src="scripts/shCore.js"></script>
	<script type="text/javascript" src="scripts/shBrushBash.js"></script>
	<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
	<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
	<script type="text/javascript" src="scripts/shBrushCss.js"></script>
	<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
	<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
	<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
	<script type="text/javascript" src="scripts/shBrushJava.js"></script>
	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
	<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
	<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
	<script type="text/javascript" src="scripts/shBrushPython.js"></script>
	<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
	<script type="text/javascript" src="scripts/shBrushScala.js"></script>
	<script type="text/javascript" src="scripts/shBrushSql.js"></script>
	<script type="text/javascript" src="scripts/shBrushVb.js"></script>
	<script type="text/javascript" src="scripts/shBrushXml.js"></script>
	<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
		SyntaxHighlighter.all();
	</script>
</head>
<body>


<article>

<header>
<div id="head">
	<div class="left photo"><img src="img/self_mini.jpg"></div>
	<div class="left">
		<h1>webkit-animation samples.</h1>
		twitter: @komasshu<br/>
	</div>
	<div class="clear"></div>

</div>

</header>

<script type="text/javascript"><!--
google_ad_client = "pub-8415144035966587";
/* 728x90, 作成済み 09/11/28 */
google_ad_slot = "4280835106";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<h3> Animations (click images below, presentation begin.)</h3>
<section>
<div class="block">
<div class="title"><h3>rotate</h3></div>
<div class="sample">
	<img src="img/koko0_171.png"  onclick="this.setAttribute('class', 'rotate');">
</div>
<div class="code">
<pre class="brush: js; ruler: true;">
.rotate {
	-webkit-animation: rot 2s linear;
}
@-webkit-keyframes rot {
	0% { -webkit-transform: rotate(-0deg); }
	100% { -webkit-transform :rotate(360deg); }
}
</pre>
</div>
<div class="clear"></div>
</div>
</section>

<section>
<div class="block">
<div class="title"><h3>rotateX</h3></div>
<div class="sample">
	<img src="img/koko0_171.png"  onclick="this.setAttribute('class', 'rotateX');">
</div>
<div class="code">
<pre class="brush: js; ruler: true;">
.rotateX {
	-webkit-animation: rotX 2s linear;
}

@-webkit-keyframes rotX {
	0% { -webkit-transform: rotateX(-0deg); }
	100% { -webkit-transform :rotateX(360deg); }
}
</pre>
</div>
<div class="clear"></div>
</div>
</section>

<section>
<div class="block">
<div class="title"><h3>rotateY</h3></div>
<div class="sample">
	<img src="img/koko0_171.png"  onclick="this.setAttribute('class', 'rotateY');">
</div>
<div class="code">
<pre class="brush: js; ruler: true;">
.rotateY {
	-webkit-animation: rotY 2s linear;
}
@-webkit-keyframes rotY {
	0% { -webkit-transform: rotateY(-0deg); }
	100% { -webkit-transform :rotateY(360deg); }
}
</pre>
</div>
<div class="clear"></div>
</div>
</section>

<section>
<div class="block">
<div class="title"><h3>translate in x axis.</h3></div>
<div class="sample">
	<img src="img/koko0_171.png"  onclick="this.setAttribute('class', 'toX');">
</div>
<div class="code">
<pre class="brush: js; ruler: true;">
.toX {
	-webkit-animation: toX 2s linear;
}
@-webkit-keyframes toX {
	0% { -webkit-transform: translate(0px,0); }
	100% { -webkit-transform: translate(240px,0); }
}
</pre>
</div>
<div class="clear"></div>
</div>
</section>

<section>
<div class="block">
<div class="title"><h3>Mix(rotateX & rotate)</h3></div>
<div class="sample">
	<img src="img/koko0_171.png"  onclick="this.setAttribute('class', 'rotXZ');">
</div>
<div class="code">
<pre class="brush: js; ruler: true;">
.rotXZ {
	-webkit-animation: rotXZ 2s linear;
}
@-webkit-keyframes rotXZ {
	0% { -webkit-transform: rotateX(0deg) rotate(0deg); }
	100% { -webkit-transform: rotateX(360deg) rotate(360deg); }
}
</pre>
</div>
<div class="clear"></div>
</div>
</section>

<section>
<div class="block">
<div class="title"><h3>Mix(translate & rotate)</h3></div>
<div class="sample">
	<img src="img/koko0_171.png"  onclick="this.setAttribute('class', 'toXrotZ');">
</div>
<div class="code">
<pre class="brush: js; ruler: true;">
.toXrotZ {
	-webkit-animation: toXrotZ 2s linear;
}
@-webkit-keyframes toXrotZ {
	0% { -webkit-transform: translate(0,0) rotate(0deg); }
	100% { -webkit-transform: translate(240px,0) rotate(360deg); }
}
</pre>
</div>
<div class="clear"></div>
</div>
</section>

<script type="text/javascript"><!--
google_ad_client = "pub-8415144035966587";
/* 728x90, 作成済み 09/11/28 */
google_ad_slot = "4280835106";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


<h3> border-radius, gradient, reflect etc.(header's css) </h3>

<section>
		<div class="block code">
			<pre class="brush: js; ruler: true;">

			#head {
					background: #66CDAA;
					padding : 10px;
					height: 160px;
					font-size: 10pt;
					text-shadow: 2px 2px 1px #cccccc;
					-webkit-border-radius: 10px;
					background-image: -webkit-gradient(linear, left top, left bottom,/*上から下にグラデーション*/
						color-stop(0, rgba(255, 255, 255, .2)), /*透明度 80%*/
						color-stop(50%, rgba(255, 255, 255, .3)),/*透明度70%*/
						color-stop(90%, rgba(255, 255, 255, .8)));/*透明度20%*/
			}

			.photo {
				width: 102px;
				hegiht: 106px;
				margin-right: 15px;
				-webkit-box-reflect:below -10px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.5, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
			}

			.block {
				margin : 5px;
				padding : 3px;
				-webkit-border-radius: 10px;
				border :2px solid #00BFFF;
			}
			</pre>
		</div>
</section>

</article>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-4956033-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>